<!DOCTYPE html >
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>后台首页</title>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <div th:replace="comm/WL2022-CommAdmin :: #commLeftNavigation"></div>
        <div th:replace="comm/WL2022-CommAdmin :: #commHeader"></div>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <!-- 文章总数 -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-primary">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">文章总数</p>
                                    <p class="h3 text-white m-b-0 fa-1-5x">[[${articleCount}]]</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-book-open-page-variant fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                    <!-- 用户总数 -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-danger">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">用户总数</p>
                                    <p class="h3 text-white m-b-0 fa-1-5x">[[${userCount}]]</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                    <!-- 留言数 -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-purple">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">留言数</p>
                                    <p class="h3 text-white m-b-0 fa-1-5x">[[${messageCount}]] 条</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                    <!-- 友链数 -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-success">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">友链数</p>
                                    <p class="h3 text-white m-b-0 fa-1-5x">[[${linkCount}]]</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account-multiple fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>文章信息</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>文章标题</th>
                                            <th>创建时间</th>
                                            <th>作者</th>
                                            <th>类型</th>
                                            <th>阅读量</th>
                                            <th>留言数</th>
                                            <th>状态（置顶）</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="article,stat : ${page.records}">
                                            <td th:text="${stat.count}"></td>
                                            <td th:text="${article.title}"></td>
                                            <td th:text="${#dates.format(article.createDate,'yyyy-MM-dd')}"></td>
                                            <td th:text="${article.createBy}"></td>
                                            <td th:text="${byType.articleType}" th:each="byType:${categoryNavigation}" th:if="${article.articleType}==${byType.id}"></td>
                                            <td th:text="${article.views}"></td>
                                            <td th:text="${article.commentSize}"></td>
                                            <td>
                                                <label class="lyear-switch switch-solid switch-success">
                                                    <input id="kaiguan1" type="checkbox" th:if="${article.isTop}==1" checked>
                                                    <input id="kaiguan0" type="checkbox" th:if="${article.isTop}==0">
                                                    <span></span>
                                                </label>
                                            </td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-default"
                                                       th:href="@{/root/toModifyArticles/{articleId}(articleId=${article.id})}"
                                                       title="" data-toggle="tooltip"
                                                       data-original-title="编辑"><i
                                                            class="mdi mdi-pencil"></i></a>
                                                    <a class="btn btn-xs btn-default" th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}" title=""
                                                       data-toggle="tooltip" data-original-title="查看"><i
                                                            class="mdi mdi-eye"></i></a>
                                                    <a class="btn btn-xs btn-default" data-toggle="tooltip"
                                                       data-original-title="删除" id="articleDelete"><i
                                                            class="mdi mdi-window-close"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <nav>
                                        <ul class="pagination pagination-circle">
                                            <li th:class="${page.current}==1?'disabled':''">
                                                <a th:if="${page.current}==1" href="#">
                                                    <span><i class="mdi mdi-chevron-left"></i></span>
                                                </a>
                                                <a th:if="${page.current}!=1" th:href="@{/root/index(pn=${page.current}-1)}">
                                                    <span><i class="mdi mdi-chevron-left"></i></span>
                                                </a>
                                            </li>
                                            <li th:class="${num == page.current}?'active':''"
                                                th:if="1<=${page.pages}" th:each="num:${#numbers.sequence(1,page.pages)}">
                                                <a th:href="@{/root/index(pn=${num})}">[[${num}]] </a></li>
                                            <li th:class="${num == page.current}?'active':''"
                                                th:if="1>${page.pages}" th:each="num:${#numbers.sequence(1,1)}">
                                                <a th:href="@{/root/index(pn=${num})}">[[${num}]] </a></li>
                                            <li th:class="${page.current==page.pages}?'disabled':''">
                                                <a th:if="${page.current==page.pages}" href="#">
                                                    <span><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                                <a th:if="${page.current!=page.pages}" th:href="@{/root/index(pn=${page.current}+1)}">
                                                    <span><i class="mdi mdi-chevron-right"></i></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
</body>

<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>

<script type="text/javascript">

    layui.use(['jquery', 'form',], function () {
        const layer = layui.layer;
        const form = layui.form;
        const $ = layui.jquery;
    });

    $('#articleDelete').on("click", function () {
        alert("开发中。。。");   })
    $('#kaiguan1').on("click", function() {
        alert("开发中。。。");    })
    $('#kaiguan0').on("click", function() {
        alert("开发中。。。");    })
</script>
</html>
